﻿<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
        .containment-wrapper { width: 95%; height: 150px; border: 2px solid #ccc; padding: 10px; }
        .docs { clear: left; font-weight: normal; font-size: 12pt; margin: 0; padding: 0.5em 0 1em; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <h3 class="docs">
        Constrain movement along an axis:</h3>
    <DotNetAge:CollapsablePanel ID="VerticalDroppablePanel" runat="server" Title="Drag me Vertical"
        Width="200px" Style="cursor: n-resize;">
        <ContentTempalte>
            <p style="margin: 10px;">
                I can be dragged only vertically</p>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <DotNetAge:CollapsablePanel ID="HorizontalDroppablePanel" runat="server" Title="Drag me horizontally"
        Width="200px" Style="cursor: e-resize; position: relative; left: 221px; top: -75px;">
        <ContentTempalte>
            <p style="margin: 5px;">
                I can be dragged only horizontally</p>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <h3 class="docs">
        Or to within another Container Control:</h3>
    <asp:Panel ID="WrapperPanel" runat="server" CssClass="containment-wrapper">
        <asp:Panel ID="InBoxDraggablePanel" runat="server" CssClass="draggable ui-widget-content">
            <p>
                I'm contained within the box</p>
        </asp:Panel>
        <asp:Panel ID="ParentDraggablePanel" runat="server" CssClass="draggable ui-widget-content">
            <p>
                I'm contained within the box's parent</p>
        </asp:Panel>
        <asp:Panel ID="SubContainerPanel" runat="server" class="draggable ui-widget-content">
            <asp:Panel ID="OnlyInMyParentDraggablePanel" runat="server" CssClass="ui-widget-header">
                <p>
                    I'm contained within my parent</p>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>
    <DotNetAge:Draggable ID="VerticalDraggable" runat="server" DragOrientation="Vertical">
        <Target TargetID="VerticalDroppablePanel" />
    </DotNetAge:Draggable>
    <DotNetAge:Draggable ID="HorizontalDraggable" runat="server" DragOrientation="Horizontal">
        <Target TargetID="HorizontalDroppablePanel" />
    </DotNetAge:Draggable>
    <DotNetAge:Draggable ID="InBoxDraggable" runat="server" Container="Customize">
        <Target TargetID="InBoxDraggablePanel" />
        <ContainsIn TargetID="WrapperPanel" />
    </DotNetAge:Draggable>
    <DotNetAge:Draggable ID="DocumentDraggable" runat="server" Container="Document">
        <Target TargetID="ParentDraggablePanel" />
    </DotNetAge:Draggable>
    <DotNetAge:Draggable ID="ParentDraggable" runat="server" Container="Parent">
        <Target TargetID="OnlyInMyParentDraggablePanel" />
    </DotNetAge:Draggable>
    </form>
</body>
</html>
